<template>
    <div class="language">
        <div class="top">
            <img src="../../assets/images/cz1.png" alt="" @click="goOption">
            <p>{{$t("common.yuyan")}}</p>
        </div>
        <div class="content" v-for="lists in list" :key="lists.name" @click="change(lists.inn)">
            <p>{{lists.name}}</p>
            <img v-show="lists.inn == $i18n.locale" src="../../assets/images/language.png" alt="" >
        </div>
    </div>
  
</template>

<script>
import { Locale } from "vant";
import enUS from "vant/es/locale/lang/en-US";
import zhTW from "vant/es/locale/lang/zh-TW";
import zhCN from "vant/es/locale/lang/zh-CN";
import { mapGetters } from "vuex";
export default {
    computed: {
    ...mapGetters(["getUserInfo"]),
  },
    data(){
        return{
            list:[
                {name:'香港中文简体',inn:'zh_CN'},
                {name:'香港中文繁體',inn:'zh_TW'},
                {name:'English',inn:'en_US'},
            ],
            userInfo: {},
        }
    },
    created(){
        this.userInfo = this.getUserInfo || {};

    },
    methods:{
        goOption(){
            this.$router.push('/options')
        },
        async change(bb){
        localStorage.setItem('lang',bb)
        this.$i18n.locale = bb
        console.log(bb)
        if (bb == "zh_CN") {
            localStorage.setItem("lang", "zh_CN");
            Locale.use("zh-CN", zhCN);
        } else if (bb == "en_US") {
            Locale.use("en-US", enUS);
        } else if (bb == "zh_TW") {
            Locale.use("zh-TW", zhTW);
        }
        const ret = await this.$http({
            url: '/user/user/modifyingUserLanguage',
            method: 'post',
            data: {
                "uid": this.userInfo.uid,
                "languageCode": this.$i18n.locale
            }
        })
        if(ret.data.code === 0){
            //
        }
       }
    }
}
</script>

<style scoped lang="scss">
.language{
    margin: 0;
    padding: 0;
    .top{
        height: 11.73vw;
        width: 100vw;
        background-color: #090A1B;
        display: flex;
        align-items: center;
        //font-family: Microsoft Yahei;
        img{
            height: 5.3vw;
            width: 5.3vw;
            left: 2.4vw;
            position: absolute;
        }
        p{
            font-size: 4.8vw;
            color: rgba(255, 255, 255, 100);
            margin: 0 auto;
            letter-spacing: 0.2vw;
        }
    }
    .content{
        color: rgba(187, 187, 187, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        height: 17.06vw;
        p{
            position: relative;
            top: 6.4vw;
            left: 4.8vw; 
            letter-spacing: 0.18vw; 
        }
        img{
            width: 4.8vw;
            height: 4.8vw;
            position: relative;
            top: 2.13vw;
            left: 89.86vw;
        }
    }
}

</style>
